<template>
  <div class="paihang">
    <van-nav-bar
      title="云音乐歌手版"
      left-arrow
      @click-left="$router.push({ path: '/home' })"
    />
    <van-tabs v-model="active" @click="isClick">
      <van-tab title="华语"></van-tab>
      <van-tab title="欧美"></van-tab>
      <van-tab title="韩国"></van-tab>
      <van-tab title="日本"></van-tab>
    </van-tabs>
    <div
      class="cell"
      v-for="(item, index) in songList"
      :key="index"
      @click="$router.push({ path: '/songuser', query: { id: item.id } })"
    >
      <div class="img-item">
        <van-image
          width="80"
          height="80"
          fit="cover"
          :src="item.img1v1Url"
          lazy-load
        />
      </div>
      <p class="sonName">{{ item.name }}</p>
      <p class="score">热度{{ item.score }}</p>
    </div>
  </div>
</template>

<script>
import { getPaihang } from './paihang'
export default {
  name: 'paihang',
  data () {
    return {
      active: 0,
      songList: []
    }
  },
  async created () {
    console.log(this.active)
    let res = await getPaihang({ type: 1 })
    console.log(res)
    this.songList = res.data.list.artists
  },
  methods: {
    async isClick () {
      let count = this.active + 1
      console.log(this.active + 1)
      let res = await getPaihang({ type: count })
      console.log(res)
      this.songList = res.data.list.artists
    }
  }
}
</script>

<style scoped>
.van-nav-bar {
  background-color: #ffffff;
}
.cell {
  margin-top: 10px;
  margin-left: 20px;
  font-size: 16px;
  display: flex;
}
.img-item img {
  height: 80px;
  width: 80px;
}
.sonName {
  margin-left: 16px;
  font-size: 12px;
  line-height: 60px;
}
.score {
  margin-left: 50px;
  font-size: 12px;
  line-height: 60px;
}
</style>
